<script lang="ts">
export default {
  name: 'study6-compontents-SonDemo3'
}
</script>

<template>
  <h2>组合式api :props</h2>
  <div class="note">
    <h3>组合式api(setup语法糖)</h3>
    <p>1. defineProps 定义的属性均只读属性，无法修改</p>
    <p>2. 在模板字符串中直接使用这些属性，在script中需要（props.）调用</p>
    <p>3. 如果要修改，通过赋值修改属性值(t.value 或 包装方法)</p>
  </div>

  <hr class="hr-style" />
  <div class="test">
    <h3 @click="editTitle">props.title - 赋值修改值: {{ t }}</h3>
    <p>props.des: {{ des }}</p>
    <p>props.user.name: {{ user.name }}</p>
    <p>props.user.sex: {{ user.sex }}</p>
  </div>

  <hr class="hr-style" />
  <div class="test">
    <div v-show="isShow" class="isShowHide">显示或隐藏</div>
    <div v-show="isShow2" class="isShowHide2">显示或隐藏2</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// defineProps 定义的属性均只读属性，无法修改
const props = defineProps({
  // 在模板字符串中直接使用这些属性，在script中需要（props.）调用
  title: {
    type: String,
    required: true
  },
  des: {
    // default 与 required 写在一起时 required 失效
    type: [String, Number],
    default: 'des默认值'
  },
  dao: {
    type: Object,
    default() {
      return {
        name: '青龙影月刀'
      }
    }
  },
  user: {
    type: Object,
    // default 的形参 rawProps 可以获取 props 这一整个对象，即属性内可以调用其它属性使用
    default(rawProps: any) {
      console.log(rawProps, 'rawProps')
      return {
        name: '志超' + rawProps.dao.name,
        sex: 1
      }
    }
  },
  des2: {
    type: [String, Number],
    default: 'des2默认值'
  },
  // 函数类型的默认值
  propH: {
    type: Function,
    // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
    // 可以传值，也可以传函数(在调用的时候使用)
    default() {
      console.log('子组件props函数被调用')
      return 'Default function'
    }
  }
})

// 无法为“title”赋值，因为它是只读属性
// props.title = 'wwwww'

// 通过赋值修改属性值(t.value 或 包装方法)
const t = ref(props.title)
const sonTitle = ref('sd3Demo的title')
const isShow = ref(false)
const isShow2 = ref(false)

const editTitle = () => {
  t.value = '可以修改被props的值初始化后的状态变量'
  props.propH(sonTitle.value,showHandler,showHandler2)
}

const showHandler = () => {
  isShow.value = !isShow.value
}
const showHandler2 = () => {
  isShow2.value = !isShow2.value
}
</script>

<style scoped>
.isShowHide {
  height: 100px;
  width: 100px;
  background-color: cyan;
}
.isShowHide2 {
  height: 100px;
  width: 100px;
  background-color: rgb(94, 104, 223);
}
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
